<template>
	<view class="wrapper">
		<view style="
        margin: 100px auto;
        background-color: #fff;
        width: 350px;
        height: 400px;
        padding: 20px;
        border-radius: 10px;
      ">
			<view style="margin: 20px 0; text-align: center; fent-size: 24px">
				<b>注册</b>
			</view>

			<el-form :model="user" :rules="rules" ref="userForm">
				<el-form-item prop="username">
					<el-input placeholder="请输入账号" size="medium" style="margin: 10px 0" prefix-icon="el-icon-user"
						v-model="user.username"></el-input>
				</el-form-item>

				<el-form-item prop="password">
					<el-input placeholder="请输入密码" size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock"
						show-password v-model="user.password"></el-input>
				</el-form-item>

				<el-form-item prop="confirmPassword">
					<el-input placeholder="确认密码" size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock"
						show-password v-model="user.confirmPassword"></el-input>
				</el-form-item>

				<view style="margin: 10px 0; text-align: right">
					<el-button type="primary" size="small" autocomplete="off" @click="Login">确定</el-button>
					<el-button type="warning" size="small" autocomplete="off" @click="GoLogin()">返回登录</el-button>
				</view>
			</el-form>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				user: {},
				rules: {
					username: [{
							required: true,
							message: "请输入用户名",
							trigger: "blur"
						},
						{
							min: 3,
							max: 10,
							message: "长度在 3 到 10 个字符",
							trigger: "blur",
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 3,
							max: 20,
							message: "长度在 3 到 20 个字符",
							trigger: "blur",
						},
					],
					confirmPassword: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							min: 3,
							max: 20,
							message: "长度在 3 到 20 个字符",
							trigger: "blur",
						},
					],
				},
			};
		},
		methods: {
			Login() {
				this.$refs["userForm"].validate((valid) => {
					if (valid) {
						if (this.user.password !== this.user.confirmPassword) {
							this.$message.error("两次输入密码不一致")
							return false;
						}
						this.request.post("/user/register", this.user).then((res) => {
							if (res.code === "200") {
								this.$message.success("注册成功")
							} else {
								this.$message.error(res.msg);
							}
						});
					}
				});
			},
			GoLogin() {
				console.log("login")
				
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}
		},
	};
</script>

<style scope>
	.wrapper {
		height: 100vh;
		background-image: linear-gradient(to bottom right, #00BCD4, #2196F3);
		overflow: hidden;
	}
</style>
